<html>
<head>
	<title>Tic-Tac-Toe</html>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

	<style type="text/css">
		#board 
		{
		  float: left;
		  border: 1px solid green;
		  height: 450px;
		  width: 450px;
		}

		td 
		{
		  height: 150px;
		  width: 150px;
		  text-align: center;
		  vertical-align: middle;
		  font-size: 100px;
		  font-weight: bold;
		  font-color: green;
		  font-family: geniva, verdana, helvetica;
		  border: 1px solid green;
		}

		#menu 
		{
		  width: 250;
		  height: 250;
		  float: left;
		  text-align: center;
		  align: center;
		  margin-left: 10px;
		  margin-top: 10px;
		  display: none;
		  background-color: white;
		  font-size: 60px;
		  font-family: verdana, tahoma, couriern new;
		  font-color: #0000ff;
		}

		#play_again 
		{
		  font-size: 20px;
		  color: green;
		  font-weight: bold;
		}
	</style>
	
	<script type="text/javascript">
		var TicTacToe = 
		{
		    turn: "O",  
		    board: ["", "", "", "", "", "", "", "", "", ""],  
		    win: false,
			
		    restartGame: function() 
			{
		      var board_table = '<table class="board" border="0px" cellpadding="0px" cellspacing="0px"><tr><td id="ttt0">&nbsp;</td><td id="ttt1">&nbsp;</td><td id="ttt2">&nbsp;</td></tr><tr><td id="ttt3">&nbsp;</td><td id="ttt4">&nbsp;</td><td id="ttt5">&nbsp;</td></tr><tr><td id="ttt6">&nbsp;</td><td id="ttt7">&nbsp;</td><td id="ttt8">&nbsp;</td></tr></table>';
		      $("#board").html(board_table);
		      $("#menu").hide();

		      this.board = ["", "", "", "", "", "", "", "", "", ""];

		      $("#board td").click(function(e) 
			  {
		          TicTacToe.move( e.target.id );
		      });

		    },

		    move: function(id) 
			{
		      var space = $("#" + id);  
		      var num = id.replace("ttt", ""); 

		      if (!this.board[num] && !this.win) 
			  {
		        space.html( this.turn );
		        this.board[num] = this.turn;
		        this.nextTurn();  
		      }
		    },

		    nextTurn: function() 
			{
		      this.turn = (this.turn == "O") ? "X" : "O";
		      this.win = this.check4Win();
		      if (this.win) 
			  {
		          this.endGame();
		      }
		    },

		    endGame: function() 
			{

		      if (this.win == "Cat") 
			  {
		          $("#menu").html("Cats Game.");
		      } 
			  else 
			  {
		          $("#menu").html(this.win + " wins!");
		      }
		      $("#menu").append("<button id='play_again'>Play Again</button>");

		      $("#play_again").click(function () { TicTacToe.restartGame();  });
		      $("#menu").show();
		      this.win = false;

		    },

		    wins: [[0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [6,4,2]],

		    check4Win: function() 
			{
		      for (k in this.wins)
			  {
		        var pattern = this.wins[k];
		        var p = this.board[pattern[0]] + this.board[pattern[1]] + this.board[pattern[2]];
		        if (p == "XXX") 
				{
		          return "X"; 
		        } 
				else if 
				(p == "OOO") 
				{
		          return "O";
		        }
		      }

		      var cnt = 0;
		      for (s in this.board) 
			  {
		        if (this.board[s]) { cnt+=1; }
		      }
		      if (cnt == 9) 
			  {
		        return "Cat";  
		      }
		  }
		};

		$(document).ready(function() 
		{
		    TicTacToe.restartGame();
		});

	</script>

</head>
<body>
	<div id="board"></div>
	<div id="menu"></div>
</body>
</html>